<template>
    <!-- 聊天/了解我 -->
    <div class="content" :style="fullHeightStyle" v-show="!needFakeFullScreen">
        <div class="chat">
            <div class="nav" :class="{'z-3': isAppEnv}">
                <ul>
                    <li :class="{'active':knowMeShow}" @click="changeStyle(1)">大家说</li>
                    <li :class="{'active':!knowMeShow}" @click="changeStyle(2)">了解我</li>
                    <li class="z-stress" @click="toShare" v-show="isAppEnv">
                        <img src="./../assets/share2.png">
                        分享
                    </li>
                </ul>
            </div>

            <div class="chatWindow" v-show="knowMeShow" @click="">
                <div class="sys clear a-fade-in-right" v-show="showSysMessage">
                    <div class="system fl">
                        <span>&nbsp;系统消息：</span>
                        <span>{{userEnterPrompt}}</span>加入房间
                    </div>
                </div>

                <div class="show" id="shows"
                    :style="fullHeightStyle"
                    :class="{'unfold': openEmoji || openPhoto}"
                    ref="ol"
                    @click="openEmoji=false;openPhoto=false">
                    <!-- 聊天信息 -->
                    <ul id="ul" ref="chatList" @click="openEmoji=false;openPhoto=false">
                        <li class="clear">
                            <div class="ava fl"><img src="../assets/avatar.png"></div>
                            <div class="label fl">
                                <div class="name s-office">
                                    官方主持人（阿布）
                                    <span >官方</span>
                                </div>
                                <div class="cont left">
                                    <p class="message" style="word-break:break-all;">欢迎您进入本场直播，您可以在此发表您的评论。（不要发送低俗、反动、色情等言论）!</p>
                                </div>
                            </div>
                        </li>
                        <template v-for="(item, index) in chatList">
                            <!-- 对方消息: 文字 -->
                            <li :id="item.idClient" 
                                v-if="item.text.msgType == 1" 
                                class="clear" 
                                :key="index"
                            >
                                <div class="ava fl"><img :src="acquiescehead(item.fromAvatar)"></div>
                                <div class="label fl">
                                    <div class="name" :class="{'s-office': item.text.msgType == 1}">
                                        {{item.fromNick}}
                                    </div>
                                    <div class="cont left">
                                        <p class="message" style="word-break:break-all;" v-html="ReCont(item.text.content)"></p>
                                    </div>
                                </div>
                            </li>
                            <!-- 对方消息: 图片 -->
                            <li :id="item.idClient" 
                                v-else-if="item.text.msgType == 2"
                                class="clear"
                                :key="index">
                                <div class="ava fl"><img :src="acquiescehead(item.fromAvatar)"></div>
                                <div class="label fl">
                                    <div class="name">
                                        {{item.fromNick}}
                                    </div>
                                    <img :src="item.file.url" class="upload-pic">
                                    <!--  @load="chatBoxScrollToBottom(false)" -->
                                </div>
                            </li>
                            <!-- 自已发送消息: 文字 -->
                            <li class="self"
                                :id="item.idClient"
                                :key = "index"
                                v-else-if="item.text.msgType == 3">
                                <div class="ava">
                                    <img :src="acquiescehead(item.fromAvatar)">
                                </div>
                                <div class="label">
                                    <div class="name" :class="{'s-office': item.text.msgType == 3}" style="text-align: right;">
                                        {{ item.fromNick }}
                                    </div>
                                    <div class="cont right">
                                        <p class="message" style="word-break:break-all;" v-html="ReCont(item.text.content)"></p>
                                    </div>
                                </div>
                            </li>
                            <!-- 自已发送消息: 图片 -->
                            <li class="self"
                                :key = "index"
                                v-else-if="item.text.msgType == 4"
                            >
                                <div class="ava">
                                    <img :src="acquiescehead(item.fromAvatar)">
                                </div>
                                <div class="label">
                                    <div class="name" style="text-align: right;">
                                        {{ item.fromNick }}
                                    </div>

                                    <img :src="item.file.url" class="upload-pic">
                                    <!--  @load="chatBoxScrollToBottom(true)" -->
                                </div>
                            </li>
                        </template>
                    </ul>
                </div>
                <!-- 聊天输入 -->
                <div class="m-fm" :style="chatInputStyle" ref="chatInputView" @click="checkChat">
                    <div class="shade" v-show="!isLogined" @click="checkChat"></div>
                    
                    <div class="send clear" :class="{'z-focus': chatContent!=''}">
                        <div class="text text-bg fl">
                            <input
                                type="text"
                                id="inputId"
                                v-model="chatContent"
                                class="fl"
                                placeholder="快来吐槽呗～"
                                @keyup.enter="send"
                                @blur="handleInputBlur"
                                @focus="handleInputFocus">
                        </div>
                        <div @touchstart.stop.prevent="send" class="btn fr a-scale-in">发送</div>
                        <img src="./../assets/more.png" class="more fr" @touchstart.stop.prevent="unfoldPhoto">
                        <img src="./../assets/xiaomi.png"
                            class="mode fr"
                            @touchstart.stop.prevent="unfoldEmoji">
                    </div>
                    
                    <div class="emoji" v-show="openEmoji">
                        <ul v-show="openEmoji" class="clear">
                            <li v-for="item in emojiArr" :key="item.id">
                                <img :src="item.url" @touchstart="choose(item.id)">
                            </li>
                        </ul>
                    </div>

                    <div class="pic" v-show="openPhoto">
                        <img
                            src="./../assets/pic.png"
                            class="upload-pic"
                            @click="startUploadImg" >
                        <span>图片</span>
                        <input type="file" accept="image/*" mutiple="mutiple" name="asd" id="file" @change="uploadImg">
                    </div>
                </div>
                
            </div>

            <div class="aboutMe" :style="fullHeightStyle" v-show="!knowMeShow" ref="adoutMeRef">
                <div class="m-info" v-if="annoInfo!=null">
                    <div class="box1">
                        <img src="./../assets/al-live.png">
                    </div>
                    <p class="h2">{{annoInfo.mainPretitle}}</p>
                    <p class="h3">{{annoInfo.subPretitle}}</p>
                    <div class="tag-list">
                        <div v-for="(item,index) in annoInfo.actTags"
                            :key="index"
                        >{{item}}</div>
                    </div>
                    <ul class="ul1">
                        <li class="exercise-time">
                            <p>活动时间：{{getTimeStr(annoInfo.actDatetime)}}</p>
                        </li>
                        <li class="exercise-address">
                            <p>活动地址：{{annoInfo.actPlace}}</p>
                            <p class="z-weaken">{{annoInfo.actLine}}</p>
                        </li>
                        <li class="sponsor">
                            <p>主办方：{{annoInfo.companyName}}</p>
                        </li>
                    </ul>
                </div>

                <div class="m-info">
                    <div :class="{'z-unfold': unfold}"
                        class="activeBox"
                        ref="activ">

                        <div class="btn">
                            <span :class="{active: isChoose1}" @click="isActive(1)">活动详情</span>
                            <span :class="{active: isChoose2}" @click="isActive(2)">活动流程</span>
                            <span :class="{active: isChoose3}" @click="isActive(3)">活动嘉宾</span>
                        </div>

                        <div class="detail" v-show="isChoose1" v-if="annoXqInfo.length > 0">
                            <!-- 轮播图 -->
                            <div class="swiper">
                                <swiper
                                    :options="swiperOption"
                                    class="swiper-wrap"
                                    ref="mySwiper"
                                    v-if="annoXqInfo[0].picUrl.length !== 0"
                                    >
                                    <swiper-slide
                                        v-for="(item, index) in annoXqInfo[0].picUrl"
                                        :key="index">
                                        <img :src="item">
                                    </swiper-slide>
                                    <!-- 常见的小圆点 -->
                                    <div class="swiper-pagination" slot="pagination"></div>
                                </swiper>
                            </div>

                            <p>{{annoXqInfo[0].content}}</p>
                        </div>

                        <div class="process" v-show="isChoose2">
                            <ul v-if="annoLcInfo">
                                <li v-for="(lc,index) in annoLcInfo" :key="index">
                                    <span>{{lc.startTime}}～{{lc.endTime}}</span>
                                    <span>{{lc.content}}</span>
                                </li>
                            </ul>
                        </div>

                        <div class="honer" v-show="isChoose3">
                            <ul class="clear" v-if="annoJbInfo">
                                <li v-for="(jb,index) in annoJbInfo" :key="index">
                                    <img :src="jb.picUrl" class="avatar">
                                    <div class="card">
                                        <h3>{{jb.jbName}}</h3>
                                        <h4>{{jb.jbDescription}}</h4>
                                    </div>
                                </li>
                            </ul>
                        </div>    
                    </div>

                    <div class="fold" v-show="!unfold" @click="closeMore">
                        <img src="./../assets/shouqitianchong.png">
                        收起
                    </div>

                    <p class="showMore" v-show="unfold" @click="openMore">向下展开
                        <img src="./../assets/gengduo-12.png">
                    </p>  
                </div>

                <div class="m-info" v-show="isAppEnv">
                    <div class="recommen">
                        <h3>相关推荐</h3>

                        <div
                            class="otherVedio"
                            v-for="(item,index) in liveList"
                            :key="index"
                            @click="handleClickRecommend(item.streamId, item.type, item.title, item.picUrl)"
                            >
                            <img :src="item.picUrl" class="banner">
                            <div class="font">
                                <div class="title">{{item.title}}</div>
                                <div class="state">
                                    <span class="state-sign">
                                        回放
                                        <span class="sign1 span"></span>
                                        <span class="sign2 span"></span>
                                        <span class="sign3 span"></span>
                                    </span>
                                    <span class="watch">观看</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import message from '../modules/message';
import Chatroom from "../../static/NIM_Web_Chatroom_v6.8.0.js";
// 获取浏览器版本及语言
const browser = {
	// 版本
	versions: function() {
		const u = navigator.userAgent;
		return { //移动终端浏览器版本信息
			trident: u.indexOf('Trident') > -1, //IE内核
			presto: u.indexOf('Presto') > -1, //opera内核
			webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
			gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐内核
			mobile: !!u.match(/AppleWebKit.*Mobile.*/) || !!u.match(/AppleWebKit/), //是否为移动终端
			ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
			android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或者uc浏览器
			iPhone: u.indexOf('iPhone') > -1 || u.indexOf('Mac') > -1, //是否为iPhone或者QQHD浏览器
			iPad: u.indexOf('iPad') > -1, //是否iPad
			weixin: u.indexOf('MicroMessenger') > -1, //是否微信
			webApp: u.indexOf('Safari') == -1 //是否web应该程序，没有头部与底部
		};
	}(),
	// 语言
	language: (navigator.browserLanguage || navigator.language).toLowerCase()
};
const isIosAllScreen = (()=>{
    const width = window.screen.width,
        height = window.screen.height;
    return (width==375 && height==812)
        || (width==414 && height==896);
})();
export default {
    props: ["chatroomIdData"],
    data(){
        return {
            // 是否是原生app环境
            isAppEnv: (typeof window.webkit != 'undefined' && typeof window.webkit.messageHandlers != 'undefined' && typeof window.webkit.messageHandlers.Goshare != 'undefined') || typeof window.JsInterface !='undefined',
            isAndAppEnv: typeof window.JsInterface !='undefined',
            isIosAppEnv: (typeof window.webkit != 'undefined' && typeof window.webkit.messageHandlers != 'undefined' && typeof window.webkit.messageHandlers.Goshare != 'undefined'),
            // 用户信息
            userName: window.localStorage.user ? JSON.parse(window.localStorage.user).username : "",
            img: window.localStorage.user ? JSON.parse(window.localStorage.user).img : this.defaultAva,
            token:window.localStorage.abscess ? window.localStorage.abscess:"",
            // 显示聊天还是了解我
            knowMeShow: true,
            //显示系统消息
            showSysMessage:false,
            // 系统消息消失定时器
            showSysMessageTimer: {},
            // 用户进入提示（用户名）
            userEnterPrompt: "",
            // chatroomId: this.chatroomIdData,//聊天室Id
            chatroom: {},//聊天实例
            chatList: [],
            // 显示表情模块
            openEmoji:false,
            // 显示上传图片模块
            openPhoto:false,
            //直播信息
            annoInfo:{},
            annoXqInfo:[],//直播详情
            annoLcInfo:[],//活动流程
            annoJbInfo:[],//活动嘉宾
            liveList:[],//直播列表
            // 干嘛用的？向下展开？
            unfold:true,
            // 干嘛用的？
            id:1,
            isChoose1:true,
            isChoose2:false,
            isChoose3:false,
            //是否已登录
            isLogined: true,
            // 聊天默认官方头像
            defaultOfficialAva: require("./../assets/avatar.png"),
            // 聊天输入内容
            chatContent:"",
            // 表情数组，用emojiArr命名会不会更好？
            emojiArr:[
                {
                    id:1,
                    url:require('./../assets/emoji/daxiao@2x.png'),
                    icon:"[大笑]"
                },
                {
                    id:2,
                    url:require('./../assets/emoji/mianwubiaoqing@2x.png'),
                    icon:"[面瘫]"
                },
                {
                    id:3,
                    url:require('./../assets/emoji/ganga@2x.png'),
                    icon:"[尴尬]"
                },
                {
                    id:4,
                    url:require('./../assets/emoji/xiaochulei@2x.png'),
                    icon:"[笑哭]"
                },
                {
                    id:5,
                    url:require('./../assets/emoji/feiwen@2x.png'),
                    icon:"[飞吻]"
                },
                {
                    id:6,
                    url:require('./../assets/emoji/yun-2@2x.png'),
                    icon:"[晕]"
                },   
                {
                    id:7,
                    url:require('./../assets/emoji/bizui@2x.png'),
                    icon:"[闭嘴]"
                },
                {
                    id:8,
                    url:require('./../assets/emoji/ziya@2x.png'),
                    icon:"[呲牙]"
                },
                {
                    id:9,
                    url:require('./../assets/emoji/ku@2x.png'),
                    icon:"[酷]"
                },
                {
                    id:10,
                    url:require('./../assets/emoji/liulei@2x.png'),
                    icon:"[流泪]"
                },
                {
                    id:11,
                    url:require('./../assets/emoji/shuizhuo@2x.png'),
                    icon:"[睡觉]"
                },
                {
                    id:12,
                    url:require('./../assets/emoji/shimo@2x.png'),
                    icon:"[害怕]"
                },
                {
                    id:13,
                    url:require('./../assets/emoji/heng@2x.png'),
                    icon:"[哼]"
                },
                {
                    id:14,
                    url:require('./../assets/emoji/liubixie@2x.png'),
                    icon:"[鼻血]"
                },
                {
                    id:15,
                    url:require('./../assets/emoji/santiaoxian@2x.png'),
                    icon:"[汗]"
                },
                {
                    id:16,
                    url:require('./../assets/emoji/yiwen@2x.png'),
                    icon:"[疑问]"
                },
                {
                    id:17,
                    url:require('./../assets/emoji/xingxingyan@2x.png'),
                    icon:"[星星]"
                },
                {
                    id:18,
                    url:require('./../assets/emoji/tiaopi@2x.png'),
                    icon:"[调皮]"
                },
                {
                    id:19,
                    url:require('./../assets/emoji/biti@2x.png'),
                    icon:"[鼻涕]"
                },
                {
                    id:20,
                    url:require('./../assets/emoji/xinsui@2x.png'),
                    icon:"[心碎]"
                },
                {
                    id:21,
                    url:require('./../assets/emoji/aixin-4@2x.png'),
                    
                    icon:"[爱心]"
                },
                {
                    id:22,
                    url:require('./../assets/emoji/zhadan@2x.png'),
                    icon:"[炸弹]"
                },
                {
                    id:23,
                    url:require('./../assets/emoji/shuai@2x.png'),
                    icon:"[衰]"
                },
            ],
        }
    },
    computed: {
        // 需要伪全屏
        needFakeFullScreen(){
            return this.isCrosswise || this.videoIsFullScreen;
        },
        // 满屏高度样式，替代100vh，以达到随浏览器高度实时变化
        fullHeightStyle(){
            return {
                height: this.clientHeight + 'px'
            };
        },
        //图片与文字拼接
        ReCont() {
            return function(strCont){
                // console.log(strCont)
                if(strCont == ""){
                    return
                }
                for (var i in this.emojiArr) {        
                    var item = this.emojiArr[i];
                    var strimg=" <img src="+item.url+">";
                    var reg=new RegExp("\\"+item.icon,"g");
                    strCont=strCont.replace(reg, strimg);
                }    
                return strCont;
            }
        },
        // 处理默认头像
        acquiescehead(){
            return function(url){
                console.log(url)
                if(url == "/img/default_main_pic.png"){
                    return "https://app.ailive.cloud/app/img/default_main_pic.png"
                }else{
                    return url
                }
            }
        },
        // 时间戳转化
        getTimeStr(){
            return function(str){
                if(!str){
                    return
                }
                var num = parseInt(str);
                var time = new Date(num);
                var year = time.getFullYear();
                var month = time.getMonth() + 1;
                var date = time.getDate();
                var hours = time.getHours();
                var minutes = time.getMinutes();
                if(month < 10){
                    month = "0" + month
                }
                if(date < 10){
                    date = "0" + date
                }
                if(hours < 10){
                    hours = "0" + hours
                }
                if(minutes < 10){
                    minutes = "0" + minutes
                }
                return year + "-" +　month + "-" + date + "    " + hours + ":" + minutes
            }
        },
        // 聊天输入框样式
        chatInputStyle(){
            const { chatInputIsFocused } = this;
            if(browser.versions.ios && !isIosAllScreen) {
                if(chatInputIsFocused) {
                    return {
                        'position': 'static'
                    };
                } else {
                    return {
                        'position': 'fixed'
                    };
                }
            } else {
                return {};
            }
        },
        // 
        chatroomId(){
            return this.chatroomIdData
        },
    },
    watch:{
        chatroomId(newVal, oldVal){
            if(this.token){
                this.linkWebket();
            }
        },
    },
    mounted(){
        var that = this;
    },
    methods: {
        // 分享转发
        toShare(){
            const { shareInfo } = this;
            let params = {
                title: shareInfo.title || '正在发布直播平台',
                content: shareInfo.content || '海尔920大会演播厅！',
                url: shareInfo.url || 'https://app.ailive.cloud/app',
                img: shareInfo.img || '',
            };
            if(this.isIosAppEnv){
                window.webkit.messageHandlers.Goshare.postMessage(params);
            } else if(this.isAndAppEnv){
                window.JsInterface.Goshare(params.title, params.content, params.url, params.img);
            }
        },
        //聊天初始化
        linkWebket(){
            console.log(JSON.parse(window.localStorage.getItem("user")).mobile, JSON.parse(window.localStorage.getItem("user")).wyToken, this.chatroomId.length)
            this.chatroom = Chatroom.getInstance({
                // debug: true,   
                account: JSON.parse(window.localStorage.getItem("user")).mobile,
                token: JSON.parse(window.localStorage.getItem("user")).wyToken,
                chatroomId: this.chatroomIdData,
                chatroomAddresses: ["weblink03.netease.im:443"],
                chatroomNick: this.userName,
                chatroomAvatar: JSON.parse(window.localStorage.getItem("user")).img, //用户头像 
                db:false, //若不要开启数据库请设置false。SDK默认为true。
                // privateConf: {}, // 私有化部署方案所需的配置
                onconnect: this.onChatroomConnect,
                onwillreconnect: this.onWillReconnect,
                ondisconnect: this.onDisconnect,
                onerror: this.onError,
                onmsgs: this.onChatroomMsgs,
                onsysmsg: this.onSysMsg,
                appKey: '07c21a33bd3f347e9323984014f868f3',
            });
        },
        // 进入聊天室
        onChatroomConnect(obj) {
            console.log('进入聊天室', obj);
            // 连接成功后才可以发消息
        },
        // 断开连接，即将重连
        onWillReconnect(obj) {
			// 此时说明 SDK 已经断开连接, 请开发者在界面上提示用户连接已断开, 而且正在重新建立连接
			console.log('即将重连');
			console.log(obj.retryCount);
			console.log(obj.duration);
        },
        // 丢失连接
        onDisconnect(error) {
		    // 此时说明 SDK 处于断开状态, 开发者此时应该根据错误码提示相应的错误信息, 并且跳转到登录页面
			console.log('丢失连接');
            console.log(error);
            message.error("授权过期，请重新登录");
			if (error) {
				switch (error.code) {
				// 账号或者密码错误, 请跳转到登录页面并提示错误
				case 302:
					break;
				// 重复登录, 已经在其它端登录了, 请跳转到登录页面并提示错误
				case 417:
					break;
				// 被踢, 请提示错误后跳转到登录页面
				case 'kicked':
					break;
				default:
					break;
				}
			}
        },
        // 
        onError(error) {
			console.log(error);
        },
        // 收到聊天室消息
        onChatroomMsgs(msgs){
            console.log('收到聊天室消息', msgs);
            for(var i in msgs){
                switch(msgs[i].type){
                    // 如果是自定义消息，就删除消息id对应的消息
                    case "custom": for(var j in this.chatList){if(this.chatList[j].idClient == msgs[i].content){this.chatList.splice(j, 1)}};
                    break;
                    case "text": 
                        msgs[i].text = JSON.parse(msgs[i].text);
                        this.chatList.push(msgs[i]);
                        if(this.chatList.length >= 50){
                            this.chatList.shift();
                        }
                    break;
                    case "image": 
                        msgs[i].text = JSON.parse(msgs[i].text);
                        this.chatList.push(msgs[i]);
                        if(this.chatList.length >= 50){
                            this.chatList.shift();
                        }
                    break;
                    case "notification": 
                        if(msgs[i].resend == true){
                            // this.userEnterPrompt = msgs[i].
                        }else if(msgs[i].attach.type = "memberEnter"){
                            var that = this;
                            this.userEnterPrompt = msgs[i].attach.toNick[0];
                            this.showSysMessage = true;
                            window.clearInterval(this.showSysMessageTimer);
                            this.showSysMessageTimer = window.setInterval(function(){
                                that.showSysMessage = false;
                                window.clearInterval(that.showSysMessageTimer);
                            }, 1500);
                        }
                        
                    default: 
                    break;
                }
                this.$nextTick(() => {
                    // this.chatBoxScrollToBottom(false);
                });
            }
        },
        // 
        onSysMsg(sysMsg) {
			console.log('收到系统通知', sysMsg)
			// pushSysMsgs(sysMsg);
        },
        //发送消息
        send(){
            let that = this;
            if(!this.chatContent){
                message.error('发送内容不能为空', 1200);
                return
            }
            var msg = that.chatroom.sendText({
                text: JSON.stringify({msgType: 1, content: that.chatContent}),
                done: function sendChatroomMsgDone(error, msg) {
                    if(error == null){
                        msg.text = JSON.parse(msg.text);
                        msg.text.msgType = 3;
                        that.chatList.push(msg);
                        console.log('发送聊天室' + msg.type + '消息' + (!error?'成功':'失败') + ', id=' + msg.idClient, error, msg);
                    }
                }
            });
            this.chatContent = "";
            this.$nextTick(() => {
                this.openEmoji = false;
                this.openPhoto = false;
                document.getElementById('inputId').blur();
                setTimeout(function(){
                    // that.chatBoxScrollToBottom(false);
                }, 200);
            });
        },
        uploadImg(){
            let that = this;
            var fileMsg = this.chatroom.sendFile({
                type: 'image',
                text: JSON.stringify({msgType: 2, content: ""}),
                fileInput: document.getElementById("file"),
                uploadprogress: function(obj) {
                    console.log('文件总大小: ' + obj.total + 'bytes');
                    console.log('已经上传的大小: ' + obj.loaded + 'bytes');
                    console.log('上传进度: ' + obj.percentage);
                    console.log('上传进度文本: ' + obj.percentageText);
                },
                uploaddone: function(error, file) {
                    console.log('上传' + (!error?'成功':'失败'), error, file);
                },
                beforesend: function(msg) {
                    console.log('正在发送聊天室image消息, id=' + msg.idClient, msg);
                },
                done: function sendChatroomMsgDone(error, msg){
                    if(error == null){
                        msg.text = JSON.parse(msg.text);
                        msg.text.msgType = 4;
                        that.chatList.push(msg);
                    }
                    console.log(error, msg);
                     this.$nextTick(() => {
                        this.openEmoji = false;
                        this.openPhoto = false;
                        // this.chatBoxScrollToBottom();
                    });
                }
            });
        },
        // 详情 显示隐藏更多
        openMore(){
            this.unfold = false;
        },
        closeMore(){
            this.unfold = true;
        },
        // 聊天室，介绍切换
        changeStyle(val){
            console.log(val)
            if(val == 1){
                this.knowMeShow = true;
                this.position = '20%';
            }
            if(val == 2){
                this.knowMeShow = false;
                this.position = '70%';
                this.$nextTick(() => {
                    this.heightRecord = this.$refs.activ.offsetHeight;
                })
            }
        },
        isActive(val){
            if(val == 1){
                this.isChoose1 = true;
                this.isChoose2 = false;
                this.isChoose3 = false;
            }
            if(val == 2){
                this.isChoose2 = true;
                this.isChoose1 = false;
                this.isChoose3 = false;
            }
            if(val == 3){
                this.isChoose3 = true;
                this.isChoose1 = false;
                this.isChoose2 = false;
            }
            this.$nextTick(() => {
                // this.heightRecord = this.$refs.activ.offsetHeight;
            })
        },
        checkChat(){
            if(!this.token){
                message.error('请登录后发言', 1200);
                this.openLogin();
                return
            }
        },
        // 聊天输入框失去焦点
        handleInputBlur(){
            this.openEmoji = false;
            this.openPhoto = false;
            this.chatInputIsFocused = false;
        },
        // 输入框聚焦
        handleInputFocus(){
            this.openEmoji = false;
            this.openPhoto = false;
            this.chatInputIsFocused = true;
        },
        // 开始上传图片
        startUploadImg(){
            var file = document.getElementById("file");
            file.click();
            console.log("手动触发input点击", document.getElementById("file"))
        },
        // 
        // 
        // 
        // 打开登录，观看密码
        openLogin(){
            this.showLogin = true;
            setTimeout(function () {
                document.body.classList.add('on-start');
            }, 100);
            
            setTimeout(function () {
                document.body.classList.add('document-loaded');
            }, 500);
        },
        openPassword(){
            this.showPassword = true;
            setTimeout(function () {
                document.body.classList.add('on-start');
            }, 100);
            
            setTimeout(function () {
                document.body.classList.add('document-loaded');
            }, 500);
        },
    }
}
</script>
<style lang="sass" scoped>

</style>